<template>
  <div class="products">
    <div class="tabs flex lg mx-auto justify-center">
      <div
        class="tab cursor-pointer p-2"
        :class="i == 0 ? 'active' : ''"
        v-for="(tab, i) in tabs"
        :key="i"
      >
        {{ tab.name }}
      </div>
    </div>

    <div class="tab-content flex max-w-screen-xl mx-auto p-4">
      <div class="basis-1/5">
        <img src="/static/qrcode.jpg" />
      </div>
      <div class="flex-1 leading-8 indent-6 pl-6">
        简约会议室预约创立于2020年初，三年以来我们平台注册组织数量突破8000家，我们拥有广泛的客户群体，包括企业、政府、高校和各事业单位。平台为客户提供现代化的会议室预约服务。平台定位于企业内部会议室预约系统，同时，为了满足企业的各种商务活动的需求，我们开展了平台广告位业务，帮助企业和合作伙伴实现共赢。
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const tabs = ref([
  {
    name: '简约会议室预约',
    link: 'https://meeting.seeking2020.cn'
  },
  {
    name: '敬请期待',
    link: ''
  },
  {
    name: '敬请期待',
    link: ''
  },
  {
    name: '敬请期待',
    link: ''
  }
])
</script>

<style>
.products {
  height: calc(100vh - 180px);
  background-color: #fff;
}
.tabs {
  font-size: 18px;
  overflow: hidden;
  border-radius: 10px;
  padding: 30px 0;
}
.tab {
  color: #999;
}
.tab.active {
  color: #2e72b0;
  border: 1px solid #2e72b0;
  border-radius: 30px;
}
</style>
